<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="90px">
      <el-form-item label="工单编号" prop="taskCode">
        <el-input
          v-model="queryParams.taskCode"
          placeholder="请输入工单编号"
          clearable
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="工单状态" prop="taskStatus">
        <el-select v-model="queryParams.taskStatus" placeholder="请选择工单状态" clearable>
          <el-option
            v-for="dict in task_status"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="创建类型" prop="createType">
        <el-select v-model="queryParams.createType" placeholder="请选择创建类型" clearable>
          <el-option
            v-for="dict in task_create_type"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="执行人" prop="userId">
        <!-- <el-input
          v-model="queryParams.userId"
          placeholder="请输入执行人"
          clearable
          @keyup.enter="handleQuery"
        /> -->
        <el-select v-model="queryParams.userId" placeholder="请选择执行人" clearable>
          <el-option
            v-for="item in empList"
            :key="item.id"
            :label="item.userName"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
     <el-form-item label="所属区域" prop="regionId">
      <!-- <el-input v-model="queryParams.regionId" placeholder="请输入所属区域名称" clearable @keyup.enter="handleQuery"/> -->
      <el-select v-model="queryParams.regionId" placeholder="请选择所属区域" clearable @keyup.enter="handleQuery"> 
        <el-option v-for="item in regionList" :key="item.id" :label="item.regionName" :value="item.id" />
      </el-select>
    </el-form-item>
      <el-form-item label="地址" prop="addr">
        <el-input
          v-model="queryParams.addr"
          placeholder="请输入地址"
          clearable
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      
      <el-form-item>
        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    

    <el-table v-loading="loading" :data="taskList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="工单编号" align="center" prop="taskCode" />
      <el-table-column label="工单状态" align="center" prop="taskStatus">
        <template #default="scope">
          <dict-tag :options="task_status" :value="scope.row.taskStatus"/>
        </template>
      </el-table-column>
      <el-table-column label="创建类型" align="center" prop="createType">
        <template #default="scope">
          <dict-tag :options="task_create_type" :value="scope.row.createType"/>
        </template>
      </el-table-column>
      <el-table-column label="执行人名称" align="center" prop="userName" />
      <el-table-column label="所属区域" align="center" prop="region.regionName" />
      <el-table-column label="工单类型" align="center" prop="taskType.typeName" />
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template #default="scope">
          <el-button link type="primary" @click="getTaskInfoList(scope.row)" v-hasPermi="['manage:task:query']">工单详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    
    <pagination
      v-show="total>0"
      :total="total"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />

   <el-dialog title="工单详情" v-model="taskopen" width="1000px" append-to-body>
   <el-table :data="[currentTaskDetail]" border>
    <el-table-column label="工单编号" align="center" prop="taskCode" />
    <el-table-column label="工单状态" align="center" prop="taskStatus">
      <template #default="scope">
        <dict-tag :options="task_status" :value="scope.row.taskStatus"/>
      </template>
    </el-table-column>
    <el-table-column label="创建类型" align="center" prop="createType">
      <template #default="scope">
        <dict-tag :options="task_create_type" :value="scope.row.createType"/>
      </template>
    </el-table-column>
    <el-table-column label="执行人名称" align="center" prop="userName" />
    <el-table-column label="所属区域" align="center" prop="region.regionName" />
    <el-table-column label="所属区域" align="center" prop="taskType.typeName" />
    <el-table-column label="备注" align="center" prop="desc" />
    <el-table-column label="地址" align="center" prop="addr" />
  </el-table>
</el-dialog>
  </div>
</template>

<script setup name="Task">
import { listTask, getTask, delTask, addTask, updateTask } from "@/api/manage/task";
import {listEmp} from "@/api/manage/emp";
import { loadAllParams } from '@/api/page';
import {listVm } from "@/api/manage/vm";
import { listRegion } from "@/api/manage/region";
import {listTaskType} from "@/api/manage/taskType";

const { proxy } = getCurrentInstance();
const { task_status, task_create_type } = proxy.useDict('task_status', 'task_create_type');

const taskList = ref([]);
const open = ref(false);
const loading = ref(true);
const showSearch = ref(true);
const ids = ref([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);
const title = ref("");

const data = reactive({
  form: {},
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    taskCode: null,
    taskStatus: null,
    createType: null,
    innerCode: null,
    userId: null,
    userName: null,
    regionId: null,
    desc: null,
    productTypeId: null,
    assignorId: null,
    addr: null,
  },
rules: {
  taskCode: [
    { required: true, message: "工单编号不能为空", trigger: "blur" }
  ],
  taskStatus: [
    { required: true, message: "请选择工单状态", trigger: "change" }
  ],
  createType: [
    { required: true, message: "请选择创建类型", trigger: "change" }
  ],
  innerCode: [
    { required: true, message: "租赁机编码不能为空", trigger: "change" }
  ],
  userId: [
    { required: true, message: "请选择执行人", trigger: "change" }
  ],
  regionId: [
    { required: true, message: "请选择所属区域", trigger: "change" }
  ],
  productTypeId: [
    { required: true, message: "请选择工单类型", trigger: "change" }
  ],
  assignorId: [
    { required: true, message: "指派人ID不能为空", trigger: "blur" }
  ],
  addr: [
    { required: true, message: "地址不能为空", trigger: "blur" }
  ]
}
});

const { queryParams, form, rules } = toRefs(data);

/** 查询工单列表 */
function getList() {
  loading.value = true;
  listTask(queryParams.value).then(response => {
    taskList.value = response.rows;
    total.value = response.total;
    loading.value = false;
  });
}

// 取消按钮
function cancel() {
  open.value = false;
  reset();
}

// 表单重置
function reset() {
  form.value = {
    taskId: null,
    taskCode: null,
    taskStatus: null,
    createType: null,
    innerCode: null,
    userId: null,
    userName: null,
    regionId: null,
    desc: null,
    productTypeId: null,
    assignorId: null,
    addr: null,
    createTime: null,
    updateTime: null
  };
  proxy.resetForm("taskRef");
}

/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNum = 1;
  getList();
}

/** 重置按钮操作 */
function resetQuery() {
  proxy.resetForm("queryRef");
  handleQuery();
}

// 多选框选中数据
function handleSelectionChange(selection) {
  ids.value = selection.map(item => item.taskId);
  single.value = selection.length != 1;
  multiple.value = !selection.length;
}

/** 新增按钮操作 */
function handleAdd() {
  reset();
  open.value = true;
  title.value = "添加工单";
}

/** 修改按钮操作 */
function handleUpdate(row) {
  reset();
  const _taskId = row.taskId || ids.value
  getTask(_taskId).then(response => {
    form.value = response.data;
    open.value = true;
    title.value = "修改工单";
  });
}

/** 提交按钮 */
function submitForm() {
  proxy.$refs["taskRef"].validate(valid => {
    if (valid) {
      if (form.value.taskId != null) {
        updateTask(form.value).then(response => {
          proxy.$modal.msgSuccess("修改成功");
          open.value = false;
          getList();
        });
      } else {
        addTask(form.value).then(response => {
          proxy.$modal.msgSuccess("新增成功");
          open.value = false;
          getList();
        });
      }
    }
  });
}

/** 删除按钮操作 */
function handleDelete(row) {
  const _taskIds = row.taskId || ids.value;
  proxy.$modal.confirm('是否确认删除工单编号为"' + _taskIds + '"的数据项？').then(function() {
    return delTask(_taskIds);
  }).then(() => {
    getList();
    proxy.$modal.msgSuccess("删除成功");
  }).catch(() => {});
}

/** 导出按钮操作 */
function handleExport() {
  proxy.download('manage/task/export', {
    ...queryParams.value
  }, `task_${new Date().getTime()}.xlsx`)
}
// 查询员工列表
const empList = ref([]);
function getEmpList() {
  listEmp(loadAllParams).then(responses => {
    empList.value = responses.rows;
  });
}
const vmList = ref([]);
const vmLoading = ref(false);

function getVmList() {
  vmLoading.value = true;
  listVm(loadAllParams).then(responses => {
    vmList.value = responses.rows;
  }).finally(() => {
    vmLoading.value = false;
  });
}
// 查询区域列表
const regionList = ref([]);
function getRegionList() {
 listRegion(loadAllParams).then(response => {
  regionList.value = response.rows;
}); 
}
// 查询工单类型列表
const taskTypeList = ref([]);
function getTaskTypeList() {
 listTaskType(loadAllParams).then(response => {
  taskTypeList.value = response.rows; 
 }) 
}
const taskopen = ref(false);
const currentTaskDetail = ref({});
//查看工单详情
function getTaskInfoList(row) {
  const _taskId = row.taskId;
  getTask(_taskId).then(response => {
    const taskData = response.data;

    // 查找区域名称
    if (taskData.regionId) {
      const region = regionList.value.find(item => item.id === taskData.regionId);
      taskData.region = {
        regionName: region ? region.regionName : '未知区域'
      };
    }
     if (taskData.productTypeId) {
      const taskType = taskTypeList.value.find(item => item.typeId === taskData.productTypeId);
      taskData.taskType = {
        typeName: taskType ? taskType.typeName : '未知类型'
      };
    }
    currentTaskDetail.value = taskData;
    taskopen.value = true;
  });
}

getTaskTypeList();
getRegionList();
getVmList();
getEmpList();
getList();
</script>

